<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import request from '@/api/index';
  import { nameFilter, xmloading, ToUserAndRoom } from '@/utils/public';
  import topuser from './topuser.vue';
  import { Toast } from 'vant';
  import { userStore } from '@/pinia/modules/user'
  const UseUserStore = userStore()
  const action = reactive({
    tabType:2,
    data_type:0,
    userlist:[] as Array<any>,
    topList:[] as Array<any>
  })
  const currentUser = ref<any>({
    room_open:0
  });
  const tablist = [
    {type:2,font:'周星榜'},
    {type:3,font:'富豪榜'},
    {type:1,font:'房间榜'}
  ]
  const handleTab = (item:any)=>{
    action.tabType = item.type
    getlist()
  }
  const getlist = async()=>{
    xmloading()
    const res = await request.list({
      data_type:action.data_type,
      list_type:action.tabType
    })
    Toast.clear()
    let { data_list:list = [], user_info={}, lastWinner={} } = res.data
    action.topList = list.filter((res:any)=>res.num < 4) || []
    action.userlist = list.filter((res:any)=>res.num > 3) || []
    const userRanking = user_info.num
    if(list.length < 10) user_info.poor = 1
    if(list.length >= 10) {
      const obj = list[list.length - 1]
      user_info.poor = Number(obj.score) - user_info.score + 1
    }
    if(userRanking <= 10 && userRanking-1 > 0) {
      const obj = list.find((res:any)=> res.num == userRanking-1)
      if(typeof(obj) == 'object') {
        user_info.poor = Number(obj.score) + 1 - user_info.score
      }
    }
    currentUser.value = user_info
    if(lastWinner.user_id)UseUserStore.setLastWinUser(lastWinner)
  };
  const handleGetList = (data_type=0)=>{
    action.data_type = data_type
    getlist()
  }
  const filterTips = ()=> {
    let { num ,poor } = currentUser.value
    return `距${num <= 10 && num > 0?'上一名':'上榜'}差 ${poor} 周星值`
  };
  
  onMounted(() => {
    getlist()
  })
  defineExpose({
    handleGetList
  })
</script>

<template>
  <div class="WeeklyList boxBackStyle">
    <img src="@/assets/images/titleimg2.png" class="titleimg">
    <div class="WeeklyMain">
      <div class="backBorder">
        <div class="listTypeTab flex">
          <div
            v-for="item of tablist"
            :key="item.type"
            :class="['tabBut',action.tabType == item.type?'select':'']"
            @click="handleTab(item)">
            {{ item.font }}
          </div>
        </div>
        <topuser :list="action.topList" @updatelist="getlist" />
      </div>
      <div class="userlist">
        <div class="list p-l20">
          <template v-if="action.userlist.length > 0">
            <div
              v-for="item of action.userlist"
              :key="item.ranking"
              class="userinfo flex-align">
              <div class="ranking">{{ item.num }}</div>
              <div class="portrait flex-align">
                <img @click="ToUserAndRoom(item)" :src="item.image" class="image">
                <img src="@/assets/images/icon3.png" class="iconimg"  v-if="item.room_open">
              </div>
              <div class="nickName">{{ nameFilter(item.name) }}</div>
              <div class="integral flex-align-end">
                <img src="@/assets/images/icon2.png" class="icon">
                <div>{{ item.score }}</div>
              </div>
            </div>
          </template>
          <div v-else class="noDataTips">
            <img src="@/assets/images/noDataTips.png">
            <div>暂无数据</div>
          </div>
        </div>
        <div v-if="currentUser.name" class="currentUser p-l20 flex-align userinfo">
          <div class="ranking">{{ currentUser.num?currentUser.num:'99+' }}</div>
          <div class="portrait flex-align">
            <img :src="currentUser.image" class="image">
            <img src="@/assets/images/icon3.png" class="iconimg"  v-if="currentUser.room_open">
          </div>
          <div class="nickName">{{ nameFilter(currentUser.name) }}</div>
          <div class="left">
            <div class="integral flex-align-end">
              <img src="@/assets/images/icon2.png" class="icon">
              <div>{{ currentUser.score }}</div>
            </div>
            <div v-if="action.data_type == 0 && currentUser.num != 1" class="toptips">{{ filterTips() }}</div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<style lang='scss' scoped>
  $titleTop:90px;
  .WeeklyList {
    .WeeklyMain {
      position: relative;
      width: 100%;
      .listTypeTab {
        width: 315px;
        height: 44px;
        margin: 17px auto 20px;
        padding: 4px;
        box-sizing: border-box;
        background: $listTabBackColor;
        box-shadow: inset 0px 2px 0px 0px rgba(0,0,0,0.5);
        border-radius: 33px;
        .tabBut {
          width: 109px;
          height: 36px;
          line-height: 38px;
          color: $listTabFontColor; 
          font-size: 14px;
          font-weight: 500;
          text-align: center;
          transition: color .28s;
        }
        .tabBut:nth-child(2) {
          margin: 0 4px;
        }
        .select {
          color: $listTabSelectFontColor;
          line-height: 36px;
          background: url($listTabButBack) left top / 100% 100% no-repeat;
        }
      }
      .userlist {
        width: 100%;
        height: max-content;
        min-height: 414px;
        margin-top: -10px;
        padding: 0 0 12px;
        box-sizing: border-box;
        background: #FFF6E7;
        border-radius: 12px;
        .list::-webkit-scrollbar {
          display: none;
        }
        .p-l20 {
          padding-right: 20px;
          box-sizing: border-box;
        }
        .list {
          height: max-content;
          min-height: 346px;
          padding-top: 10px;
        }
        .userinfo {
          height: 56px;
          .ranking {
            width: 50px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            font-weight: 500;
            color: #111;
            text-align: center;
          }
          .portrait {
            position: relative;
            height: 38px;
            margin-right: 16px;
            .image {
              overflow: hidden;
              width: 36px;
              height: 36px;
              border-radius: 100%;
              border: 1px solid #fff;
            }
            .iconimg {
              position: absolute;
              top: 26px;
              left: 50%;
              transform: translateX(-50%);
              width: 38px;
              height: 12px;
            }
          }
          .nickName {
            color: #111;
            font-weight: 500;
            font-size: 14px;
            line-height: 23px;
          }
          .integral {
            flex:1;
            .icon {
              width: 18px;
              height: 18px;
              margin-right: 6px;
            }
            div {
              color: #111;
              font-size: 14px;
              font-weight: 500;
              line-height: 20px;
            }
          }
        }
        .currentUser {
          background: url('@/assets/images/backimg3.png') left top / 100% no-repeat;
          .left {
            flex: 1;
            .toptips {
              font-size: 10px;
              font-weight: 400;
              color: #AF7532;
              line-height: 14px;
              text-align: right;
              margin-top: 2px;
            }
          }
        }
      }
      .noDataTips {
        height: 100%;
        padding: 110px 0 0 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
          width: 95px;
          height: 95px;
        }
        div {
          color: #111;
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
    
  }
</style>